import React, { useState } from 'react'
import { Button, Form, Input, message } from 'antd';
import API from '../api';
import { useDispatch ,useSelector} from 'react-redux';
import { SET_USER } from '../../../store/actionTypes';
import { useNavigate } from 'react-router-dom';

export default function ToLogin() {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [col,setCol]=useState('')
    const onFinish = async (values) => {
        console.log('Success:', values);
        let res = await API.login()
        console.log('res',res)
        let result = res.data.filter(item => item.username === values.username && item.password === values.password)
        if (result.length) {
            message.success('Login successful')
            setTimeout(() => {
                navigate('/home')
                dispatch({ type: SET_USER, payload: result[0] })
            }, 1500)
        } else {
            message.error('Login failed due to incorrect user name or password')
        }
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const onFieldsChange = (values) => {
        console.log(values)
        if(values.length!==0){
            setCol('red')
        }else{
            setCol('black')
        }
    }

    const languages = useSelector((state) =>state).publicReducer.language

    return (
        <main>
            <Form
                name="basic"
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 20,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                onFieldsChange={onFieldsChange}
                autoComplete="off"
            >
                <section>{languages==='Korean'?'아이디':(languages==="English"?'ID':'用户名')}</section>
                <Form.Item
                    name="username"
                >
                    <Input placeholder='ID(Email)' />
                </Form.Item>
                <p className={col}>{languages==='Korean'?'사용하시는 Email ID를 입력해 주세요':(languages==="English"?'Please enter your email ID':'请输入您使用的电子邮件ID')}
                </p>

                <section>{languages==='Korean'?'비밀번호':(languages==="English"?'PASSWORD':'密码')}</section>
                <Form.Item
                    name="password"
                >
                    <Input.Password placeholder='Password' />
                   
                </Form.Item>
                 <p className={col}>{languages==='Korean'?'영문자와 특수문자, 숫자가 포함된 8자리 이상 입력하세요.':languages==="English"?'Please enter more than 8 letters, special characters and numbers':'请输入8位以上的字母、特殊字符和数字'}</p>

                <Form.Item
                    wrapperCol={{
                        offset: 2,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                    {languages==='Korean'?'로그인':(languages==="English"?'Sign in':'登录')}
                    </Button>
                </Form.Item>
            </Form>
        </main>
    )
}
